<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="javax.json.bind.Jsonb" %>
<%@ page import="javax.json.bind.JsonbBuilder" %>
<%@ page import="com.R2DTO" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>用户主页</title>
    </head>
    <body>
    <style>
        body
        {
            background-color: #b8e5f8;
            background-image:url('sign_bg.png');
            background-repeat:no-repeat;
            background-size:cover;
            overflow:hidden;
        }
        #login{
            width: 600px;height:700px;margin-left: 35.5%;margin-top:110px;
            background: #2a989db0;
            /*box-shadow: 10px 10px 5px 2px #888888;*/
            font-size: 20px;
            border-radius: 5px;
            color:white;
            font-weight: bold;
            opacity:0.95;
        }
        #aa{
            font-size: 18px;
        }
        .loginwin{
            text-align:center;border-bottom:1px solid #e8eaec;padding-bottom:16px;margin-bottom:32px
        }
        .ivu-input-with-prefix {
            padding-left: 32px;
        }
        .ivu-input-large {
            font-size: 14px;
            padding: 6px 7px;
            height: 36px;
        }
        .ivu-input {
            display: inline-block;
            width: 100%;
            height: 32px;
            line-height: 1.5;
            padding: 4px 7px;
            font-size: 12px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            color: #515a6e;
            background-color: #fff;
            background-image: none;
            position: relative;
            cursor: text;
            transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
        }
        .ivu-input-with-prefix {
            padding-left: 32px;
        }
        .ivu-btn-success {
            color: #fff;
            background-color: #39ace3;
            border-color: #39ace3;
        }
        article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
            margin: 5px;
            padding: 0px;
        }
        p{
            text-align: center;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <div id="app">
        <form id="loginForm" action="/login/dgut" method="post" class="ivu-form ivu-form-label-top" >
            <div class="ivu-card-body" id="login">
                <div class="loginwin">
                    <img src="./logo2.png" alt="">
                    <br><span>欢迎登录用户管理系统</span>
                </div>
                    <div class="ivu-form-item ivu-form-item-required">
                        <label class="ivu-form-item-label" id="aa">用户名</label>
                        <div class="ivu-form-item-content">
                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                <input autocomplete="off" spellcheck="false" type="text" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix">
                                <span class="ivu-input-prefix"><Icon type="md-contact" size="24"></Icon></span>
                            </div>
                        </div>
                    </div>
                    <div class="ivu-form-item ivu-form-item-required">
                        <label class="ivu-form-item-label" id="aa">密码</label>
                        <div class="ivu-form-item-content">
                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type"><!---->
                                <i class="ivu-icon ivu-icon-ios-eye ivu-input-icon ivu-input-icon-normal"></i> <!---->
                                <input autocomplete="off" spellcheck="false" type="password" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix"> <span class="ivu-input-prefix">
                                    <Icon type="md-lock" ></Icon>
                                </span>
                            </div> <!---->
                        </div>
                    </div>
                <div class="dev-sign-main-aside">
                    <button type="submit" class="ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large"><!---->
                    <i class="ivu-icon ivu-icon-md-log-in"></i>
                        <% if(request.getSession().getAttribute("islogin")!=null&&request.getSession().getAttribute("islogin").equals("false"))
                        {
                            out.println("<span>授权登录到用户管理系统</span>");
                        }
                        else
                        {
                            out.println("<span>退出</span>");
                        }
                        %>
                    </button>
                    <div class="dev-sign-main-aside-tip">
                        <br><br>
                        <p><a href="/recover" class="">忘记密码？</a></p>
                        <p>尚未拥有账户？ <a href="/signup" class="">注册</a></p>
                        <p>
                            <%
                            if(request.getSession().getAttribute("jsonstr")!=null&&request.getSession().getAttribute("islogin")!=null&&request.getSession().getAttribute("islogin").equals("true"))
                            {
                                String jsonstr=(String) request.getSession().getAttribute("jsonstr");
                                out.println(jsonstr);
                            }
                            %>
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                visible: false
            },
            methods: {
                show: function () {
                    this.visible = true;
                }
            }
        })
    </script>
</body>
</html>